<template>
  <view>
    <view class="head-nav">
      <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)"
        >销售额</view
      >
      <view :class="navIndex == 2 ? 'activite' : ''" @click="checkIndex(2)"
        >订单量</view
      >
    </view>
    <view class="total">
      <view class="row">
        <view class="item">
          <text class="money">8654.00</text>
          <text class="title">今日有效销售总额</text>
        </view>
        <view class="item">
          <text class="money">80846.00</text>
          <text class="title">本月销售额</text>
        </view>
        <view class="item">
          <text class="money">21636.00</text>
          <text class="title">近三月销售额</text>
        </view>
      </view>
      <view class="row">
        <view class="item">
          <text class="money">845663.00</text>
          <text class="title">近一年销售额</text>
        </view>
        <view class="item">
          <text class="money">868</text>
          <text class="title">未结算订单</text>
        </view>
        <view class="item">
          <text class="money">54841</text>
          <text class="title">已结算订单</text>
        </view>
      </view>
    </view>
    <view class="echarts">
      <view class="header">
        <text style="font-size: 30rpx">业绩/订单量</text>
        <!-- <text style="font-size: 24rpx;">本月</text> -->
        <picker
          @change="PickerChange"
          :range="array"
          style="display: flex; align-items: center"
        >
          <text>{{ month }}</text>
          <label
            ><image
              src="/static/fh.png"
              style="width: 19rpx; height: 11rpx"
              mode="aspectFit"
            ></image
          ></label>
          <label class="">{{ array[index] }}</label>
        </picker>
      </view>

      <view class="echarts-content">
        <qiun-title-bar title="折线图" />
        <view class="charts-box">
          <qiun-data-charts type="line" :chartData="chartsDataLine1" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { Storage } from "@/static/libs/utils";
export default {
  data() {
    return {
      navIndex: 1,
      chartsDataLine1: {},
      month: "",
      navIndex: 1,
      array: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      token: "",
      Line: {
        categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
        series: [
          {
            name: "成交量A",
            data: [35, 8, 25, 37, 4, 20],
          },
          {
            name: "成交量B",
            data: [70, 40, 65, 100, 44, 68],
          },
          {
            name: "成交量C",
            data: [100, 80, 95, 150, 112, 132],
          },
        ],
      },
    };
  },
  onLoad() {
    this.token = Storage.get("token");
  },
  onReady() {
    this.getServerData();
  },
  onShow() {
    this.getPerformaceInfo();
  },
  methods: {
    // 获取业绩信息
    getPerformaceInfo() {
      this.$request
        .get(
          `/waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=statistic&op=order&ta=index&do=web&m=we7_wmall&i=1&token=${this.token}&isajax=1`
        )
        .then((res) => {
          // console.log(90,res);

          var arr = [];
          arr = res.data.message.message.days;
          var arr1 = arr.map((item) => {
            var strArray = item.split("2021");
            // console.log(strArray);
            return strArray[1];
          });
          var newArr = arr1.map((item) => {
            var strArray = item.split("06");
            // console.log(strArray);
            return "6-" + strArray[1];
          });
          // console.log(newArr);
          this.Line["categories"] = newArr;

          var data = [];
          // name的值
          var data_ = res.data.message.message.titles;
          // data的值
          var _data = res.data.message.message.fields;
          data_.forEach((item, index) => {
            var a = {};
            a.name = item;
            data.push(a);
          });
          for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < _data.length; j++) {
              if (i === j) {
                data[i].data = res.data.message.message[_data[j]];
              }
            }
          }
          // console.log(data);
          this.Line.series = data;
        });
    },

    checkIndex(index) {
      this.navIndex = index;
    },

    getServerData() {
      setTimeout(() => {
        this.chartsDataLine1 = this.Line;
      }, 1500);
    },
    //下拉框
    PickerChange(e) {
      //改变的事件名
      //console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
      this.index = e.target.value; //将数组改变索引赋给定义的index变量
      this.month = this.array[this.index]; //将array【改变索引】的值赋给定义的jg变量
      // console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
    },
  },
};
</script>
<style scoped>
page {
  background: rgb(245, 245, 245);
}
.head-nav {
  width: 490rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 130rpx;
  font-size: 30rpx;
}
.activite {
  font-weight: bold;
  border-bottom: 6rpx solid #feb140;
}
.total {
  width: 690rpx;
  height: 241rpx;
  background: #feb140;
  border-radius: 10rpx;
  margin: 30rpx;
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20rpx 40rpx;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 40rpx;
}
.money {
  font-size: 30rpx;
}
.title {
  font-size: 20rpx;
}
.echarts {
  width: 690rpx;
  height: 715rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 30rpx;
}
.header {
  display: flex;
  flex-direction: row;
  margin: 36rpx 20rpx;
  justify-content: space-between;
}
</style>
